<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/reserva.css">
<title>Reservas</title>
</head>
<body>
	<h1>Reservas</h1>

	<div class="ContenedorPrincipal">

		<div class="cContenedorDerecho">
			<div class="cAgregarCliente">
				<div class="cbxClientes">
					<select name="cbxClientes" class="selClientes" id="cbxClientes">
						<option value="0">Seleccionar un cliente: </option>
						<c:forEach items="${ clientes }" var="cliente">
							<option value=${ cliente.idCliente }>${ cliente.nombre },
								${ cliente.apellido } - ${ cliente.dni }</option>
						</c:forEach>
					</select>
				</div>
				<div class="aAgregarCliente">
					<a href="javascript:idCliente();" id="index">Agregar</a>
				</div>
			</div>

			<div class="cTablaClientes">
				<table border="1">
					<thead>
						<tr>
							<th class="thNombre">Nombre</th>
							<th class="thDNI">DNI</th>
							<th class="thQuitar">-</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${ pasajeros }" var="pasajero">
							<tr>
								<td>${ pasajero.nombre },${ pasajero.apellido }</td>
								<td>${ pasajero.dni }</td>
								<td><a href="javascript:borrarCliente(${ pasajero.idCliente });">Quitar</a></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>

			<div class="cContinuar">
				<div class="cAceptar">
					<a href="<%= request.getContextPath()%>/guardar_reserva">Aceptar</a>
				</div>
				<div class="cVolver">
					<a href="<%= request.getContextPath()%>/paquetes${ datosReserva }">Cambiar paquete</a>
				</div>
				<div class="cVolver">
					<a href="<%= request.getContextPath()%>/index">Ir al inicio</a>
				</div>
			</div>

		</div>


		<div class="cContenedorIzquierdo">

			<div class="cPrecio">
				<div class="lblPrecio">
					<label>Precio por persona:</label>
				</div>
				<div class="valPrecio">
					<span>$ ${ pdv.precio }</span>
				</div>

				<div class="cDetalles">
					<p class="pPasajeros">
					<div class="cPersonas">
						<span class="spanPersonas">${ cantidadPersonas } personas</span><span
							class="vPrecioPersona">$ ${ precioPersonas }</span>
					</div>
					<div class="cImpuestos">
						<span class="spanImpuestos">Impuestos</span><span
							class="vImpuestos">$ ${ impuestos }</span>
					</div>
				</div>


				<div class="cSeparador"></div>

				<div class="cTotalPagar">
					<div class="lblTotalPagar">
						<label class="lblEtiquetaPrecio">Total a pagar: </label>
					</div>
					<div class="lblTotalPagar">
						<p class="vTotalPagar">$ ${ precioTotal }</p>
					</div>
				</div>

			</div>

			<div class="cItinerario">
				<h3>Itinerario</h3>
				<div class="cIda">
					<label class="lblIda">Ida:</label>
					<p class="pIda">
					<p class="pIda">
						<span class="AeropuertoOrigen">${ pdv.getNombreAeropuertoSalida() }</span> --> <span
							class="AeropuertoDestino">${ pdv.getNombreAeropuertoArrivo() }</span>
					</p>
					<p class="pIda">
						<span class="Sale">Sale: </span><span class="FechaIda">${ pdv.fechaSalida } -
							${ pdv.horaSalida }</span>
					</p>
				</div>
				<div class="cVuelta">
					<label class="lblVuelta">Vuelta:</label>
					<p class="pVuelta">
						<span class="AeropuertoOrigen">${ pdv.getNombreAeropuertoArrivo() }</span> --> <span
							class="AeropuertoDestino">${ pdv.getNombreAeropuertoSalida() }</span>
					</p>
					<p class="pVuelta">
						<span class="Sale">Sale: </span> <span class="FechaVuelta">${ pdv.fechaArrivo } -
							${ pdv.horaArrivo }
						</span>
					</p>
				</div>
			</div>

			<div class="cAlojamiento">
				<h3>Alojamiento</h3>
				<p class="pHotel">${ pdv.stringHotel() }</p>
				<div class="Estrellas">
					<img src="img/estrella.png" height="18" width="18"> <img
						src="img/estrella.png" height="18" width="18"> <img
						src="img/estrella.png" height="18" width="18"> <img
						src="img/estrella.png" height="18" width="18"> <img
						src="img/estrella.png" height="18" width="18">
				</div>
			</div>

		</div>


	</div>

</body>
<script type="text/javascript">
	function idCliente() {
		var e = document.getElementById("cbxClientes");
		var idcli = e.options[e.selectedIndex].value;
		key = escape("cliente");
		value = escape(idcli);
		if(value != 0){
			var kvp = document.location.search.substr(1).split('&');
			if (kvp == '') {
				document.location.search = '?' + key + '=' + value;
			} else {
				var i = kvp.length;
				var x;
				while (i--) {
					x = kvp[i].split('=');

				}
				if (i < 0) {
					kvp[kvp.length] = [ key, value ].join('=');
				}
	
				//this will reload the page, it's likely better to store this until finished
				document.location.search = kvp.join('&');
			}
		}
	}
	
	function borrarCliente(variable_value) {
		    var URL = String(top.location.href);
		    var regex = new RegExp( "\\?cliente=" + variable_value + "[^&]*&?", "gi");
		    URL = URL.replace(regex,'?');
		    regex = new RegExp( "\\&cliente=" + variable_value + "[^&]*&?", "gi");
		    URL = URL.replace(regex,'&');
		    URL = URL.replace(/(\?|&)$/,'');
		    regex = null;
			top.location.href = URL;
	}
	
	

	   
    window.history.forward();       
    function noBack() {   
       window.history.forward();
    }
</script>
</html>